<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Contact Manager</title>
        <link rel="stylesheet" href="css/dojoStyle.css" type="text/css">
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel="stylesheet" href="../lib/dojo/dojox/widget/FisheyeList/FisheyeList.css">
        <script type="text/javascript">
            var djConfig = {
                baseUrl: "../lib/dojo/dojo/",
                parseOnLoad: true,
                debug: true
            }
        </script>
        <script type="text/javascript" src="../lib/dojo/dojo/dojo.js">
        </script>
        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dojox.widget.FisheyeList");
            dojo.require("dojox.storage");
        </script>
        <script type="text/javascript" src="js/Contact.js">
        </script>
        <script type="text/javascript" src="js/EventHandlers.js">
        </script>
        <script type="text/javascript" src="js/DataManager.js">
        </script>
        <script type="text/javascript" src="js/ContactManager.js">
        </script>
        <script type="text/javascript">
            var contactManager = new ContactManager();
        </script>
    </head>
    <body onLoad="contactManager.init();">
        <center>
            <!-- The initializing startup message -->
            <div id="divInitializing" class="cssInitializing">
                <center>
                    ...Initializing Contact Manager, please wait...
                </center>
            </div>
            <div id="divMain" class="cssMain" style="width:100%;">
                <!-- The fisheye menu bar -->
                <div class="outerbar">
                    <div dojoType="dojox.widget.FisheyeList" itemWidth="64" itemHeight="64" itemMaxWidth="128" itemMaxHeight="128" orientation="horizontal" effectUnits="1" itemPadding="10" attachEdge="top" labelEdge="bottom">
                        <div dojoType="dojox.widget.FisheyeListItem" onclick="contactManager.doNewContact();" label="New Contact" iconSrc="img/icon_new.gif">
                        </div>
                        <div dojoType="dojox.widget.FisheyeListItem" label="" iconSrc="img/transPix.gif">
                        </div>
                        <div dojoType="dojox.widget.FisheyeListItem" onclick="contactManager.doSaveContact();" label="Save Contact" iconSrc="img/icon_save.gif">
                        </div>
                        <div dojoType="dojox.widget.FisheyeListItem" label="" iconSrc="img/transPix.gif">
                        </div>
                        <div dojoType="dojox.widget.FisheyeListItem" onclick="contactManager.doDeleteContact();" label="Delete Contact" iconSrc="img/icon_delete.gif">
                        </div>
                        <div dojoType="dojox.widget.FisheyeListItem" label="" iconSrc="img/transPix.gif">
                        </div>
                        <div dojoType="dojox.widget.FisheyeListItem" onclick="contactManager.doClearContacts();" label="Clear Contacts" iconSrc="img/icon_clear.gif">
                        </div>
                        <div dojoType="dojox.widget.FisheyeListItem" label="" iconSrc="img/transPix.gif">
                        </div>
                        <div dojoType="dojox.widget.FisheyeListItem" onclick="contactManager.doExit();" label="Exit Contact Manager" iconSrc="img/icon_exit.gif">
                        </div>
                    </div>
                </div>
                <div class="cssSpacer">
                </div>
                <form>
                    <table border="0" cellpadding="0" cellspacing="0" width="900" align="center" id="content" class="cssContent">
                        <!-- Selector -->
                        <td width="44" align="right" valign="top">
                            <br>
                            <img src="img/sel_xx_over.gif" id="sel_xx" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_09.gif" id="sel_09" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_ac.gif" id="sel_ac" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_df.gif" id="sel_df" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_gi.gif" id="sel_gi" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_jl.gif" id="sel_jl" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_mo.gif" id="sel_mo" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_pr.gif" id="sel_pr" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_su.gif" id="sel_su" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_vx.gif" id="sel_vx" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                            <img src="img/sel_yz.gif" id="sel_yz" class="cssTab" onClick="contactManager.eventHandlers.stClick(this);" onMouseOver="contactManager.eventHandlers.stOver(this);" onMouseOut="contactManager.eventHandlers.stOut(this);">
                            <br>
                        </td>
                        <!-- List -->
                        <td width="200" valign="top">
                            <div class="cssContactList" id="contactList">
                            </div>
                        </td>
                        <!-- Main -->
                        <td width="620" valign="top">
                            <div class="cssMainOuter">
                                <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                                    <tr>
                                        <!-- Contact Identity -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Contact Identity
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            Title:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="title" maxlength="3" size="4" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            First Name:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="firstName" maxlength="15" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Middle Name:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="middleName" maxlength="15" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Last Name:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="lastName" maxlength="20" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Suffix:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="suffix" maxlength="3" size="4" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td><!-- Divider -->
                                        <td width="2%">
                                            &nbsp;
                                        </td>
                                        <!-- Work Identity -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Work Identity
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            Job Title:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="jobTitle" maxlength="24" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Company:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="company" maxlength="25" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Department:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="department" maxlength="25" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Manager's Name:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="managerName" maxlength="30" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Assistant's Name:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="assistantName" maxlength="30" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            &nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <!-- Personal Phone Numbers -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Home Phone Numbers
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            Home Phone:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="homePhone" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Cell Phone:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homeCellPhone" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            FAX:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homeFAX" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Pager:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homePager" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td><!-- Divider -->
                                        <td width="2%">
                                            &nbsp;
                                        </td>
                                        <!-- Work Phone Numbers -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Work Phone Numbers
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            Work Phone:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="workPhone" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Cell Phone:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workCellPhone" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            FAX:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workFAX" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Pager:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workPager" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            &nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <!-- Home Address -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Home Address
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            Line 1:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="homeAddressLine1" maxlength="25" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Line 2:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homeAddressLine2" maxlength="25" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            City:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homeCity" maxlength="25" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            State:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homeState" maxlength="2" size="3" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Zip Code:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homeZipCode" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td><!-- Divider -->
                                        <td width="2%">
                                            &nbsp;
                                        </td>
                                        <!-- Work Address -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Work Address
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            Line 1:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="workAddressLine1" maxlength="25" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Line 2:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workAddressLine2" maxlength="25" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            City:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workCity" maxlength="25" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            State:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workState" maxlength="2" size="3" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Zip Code:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workZipCode" maxlength="10" size="11" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            &nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <!-- Personal Web Info -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Home Web Info
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            eMail:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="homeEMail" maxlength="40" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Web Site:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homeWebSite" maxlength="50" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            IM Nickname:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="homeIMNickname" maxlength="15" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td><!-- Divider -->
                                        <td width="2%">
                                            &nbsp;
                                        </td>
                                        <!-- Work Web Info -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Work Web Info
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            eMail:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="workEMail" maxlength="40" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Web Site:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workWebSite" maxlength="50" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            IM Nickname:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="workIMNickname" maxlength="15" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            &nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <!-- Family Info -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Family Info
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            Spouse Name:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="spouseName" maxlength="15" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Children's Name:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="childrenName" maxlength="75" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Anniversary:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="anniversary" maxlength="8" size="9" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td><!-- Divider -->
                                        <td width="2%">
                                            &nbsp;
                                        </td>
                                        <!-- Miscellaneous Info -->
                                        <td width="49%" valign="top">
                                            <div class="cssDataBox">
                                                <table border="0" cellpadding="1" cellspacing="1" width="100%">
                                                    <tr>
                                                        <td colspan="2" class="cssDataBoxHeader">
                                                            Miscellaneous Info
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="50%" valign="middle">
                                                            Birthday:
                                                        </td>
                                                        <td width="50%" valign="middle">
                                                            <input type="text" id="birthday" maxlength="8" size="9" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            High School Info:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="highSchoolInfo" maxlength="50" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            College Info:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="collegeInfo" maxlength="50" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Custom 1:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="custom1" maxlength="80" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            Custom 2:
                                                        </td>
                                                        <td valign="middle">
                                                            <input type="text" id="custom2" maxlength="80" size="15" class="cssTextbox">
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                        </tr>
                    </table>
                </form>
            </div>
        </center>
    </body>
</html>